<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>IT书城</title>
<style type="text/css">
 body { padding:0; margin:0;}


#head { width:1200px; height:120px; margin:0 auto; font-size:12px;}
#head .left{ width:600px; height:25px;  background-color:#008bce;  float:left;}
#head .right{ width:600px; height:25px; background-color:#008bce; float:right;}
#head .logo{ width:300px; height:60px; }
#head .logo img{ margin-top:10px; margin-left:50px;} 
#baidu{height: 33px; float:right;margin-right:50px; }
#baidu .input{border: 1px solid #999999;height: 100%; }
#baidu input[type=text]{height:86%;border:0px;width: 250px;}
#baidu div{float: left;}
#baidu>button{width: 100px;height: 35px;background: #3385ff;color: #fff;border: none;}
/*这是头部CSS*/

#xuan{ width:1200px; height:500px; margin:0 auto;}
#xuan .zuo{ width:200px; height:100%; float:left; background-color:#dee7f9;}
#xuan  .zuo .fen{ width:200px; height:40px; background-color:#008bce; font-size:24px; margin-top:-30px; text-align:center; color:#FFFFFF;}
#xuan  .zuo .li{ width:200px; height:460px;}
#xuan  .zuo .li ul li { list-style-type:none; margin-top:10px; margin-left:30px;}
#xuan  .zuo .li ul li a{ text-decoration:none; color:#666666; font-size:20px;}
#xuan .zhong{ width:800px; height:100%; float:left; }

#xuan .you{ width:250px; height:100%;float:left; background-color:#dee7f9;}
#xuan .you .li{ width:200px; height:460px;}
#xuan .you .li ul li { list-style-type:none; margin-top:10px; }
#xuan .you .li ul li a{ text-decoration:none; color:#666666; font-size:12px;}
#xuan .you .li ul li a img{ width:50px; height:70px;}
#xuan .you .tui{ width:250px; height:40px; background-color:#008bce; font-size:24px; margin-top:-30px; text-align:center; color:#FFFFFF;}
/*第一屏CSS*/

#g1 { width:1200px; margin:0 auto; margin-top:20px;}
/*第一屏广告CSS*/

#x{ width:1200px; height:550px; margin:0 auto; margin-top:25px;}
#x .sj{ width:1200px; height:50px; font-size:36px; color:#008bce;}
#x .sj b{ margin-left:15px; margin-top:10px;}
#x .sj span{ float:right; font-size:14px; color:#f7904c; margin-top:20px; margin-right:20px;}
#x .sj span a{ text-decoration:none; color:#666666;}
#x .sj img { margin-top:5px;}
#x .s{ width:1200px; height:500px;}
#x .s ul li{ list-style-type:none; width:210px; height:240px; float:left; margin-top:10px; text-align:center; margin-left:-20px;}
#x .s ul li b { color:#FF0000;}
#x .s ul li a{ text-decoration:none; color:#666666;}
#x .s ul li img { width:180px; height:190px;}
/*第二屏CSS*/


#g{ width:1200px; height:142px;  margin:0 auto; margin-top:25px;}
#g img{ margin-left:10px;}
/*第二屏广告CSS*/


#c{ width:1200px; height:300px;  margin:0 auto; margin-top:20px;}
#c .z{ widows:1200px; height:50px; font-size:36px; color:#008bce;}
#c .z b{ margin-left:15px; margin-top:10px;}
#c .z span{ float:right; font-size:14px; color:#f7904c; margin-top:20px; margin-right:20px;}
#c .z span a{ text-decoration:none; color:#666666;}
#c .z img { margin-top:5px;}
#c .s{ width:1200px; height:500px;}
#c .s ul li{ list-style-type:none; width:210px; height:240px; float:left; margin-top:10px; text-align:center; margin-left:-20px;}
#c .s ul li b { color:#FF0000;}
#c .s ul li a{ text-decoration:none; color:#666666;}
#c .s ul li img { width:180px; height:190px;}
/*第三屏CSS*/

#G5{ width:1200px; margin:0 auto;}
#G5 img { margin-top:10px;}
/*第三屏广告CSS*/


#d { width:1200px; height:200px; background-color:#eeefef; margin:0 auto; margin-top:20px;}
#d  li { list-style-type:none; height:30px; text-align:center;}
#d  li span { color:#FF0000; font-size:20px; font-weight:bold;}
#d  li a { text-decoration:none; color:#666666;}
#d .a { width:400px; height:200px;  float:left; margin-top:10px;}
#d .b { width:400px; height:200px;  float:left; margin-top:10px;}
#d .c { width:400px; height:200px;  float:right; margin-top:10px;}
/*这是底部CSS*/id="head">
</style>
</head>

<body>


  <!--这是头部HTML-->
 
 <div id="xuan">

   <div class="zhong">
     <a href="#"><img src="../images/tu.jpg" /></a>
   </div>
   <div class="you">
    <div class="tui">
	  <h2>热销排行</h2>
	</div>
	 <div class="li">
	  <ul>
	  	<c:forEach items="${sessionScope.popList }" var="book">
	  		  <li><a href="<c:url value='/bookinfo?bid=${book.bid }'/>"><img src="<c:url value='/${book.image }'/>"/></a></li>
	  	</c:forEach>  
	  </ul>
	 </div>
   </div>
 </div>
  <!--这是第一屏HTML-->
  
  <div id="g1"><a href="#"><img src="../images/g1.png" /></a></div>
    <!--这是第一屏广告HTML-->
	
  <div id="x">
   <div class="sj">
     <b>精品书籍</b>
	 <span><a href="list.html">更多书籍》</a></span>
	 <img src="../images/h2.jpg" />
   </div>
   <div class="s">
     <ul>
	   <li><a href="#"><img src="../images/S2.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
	    <li><a href="#"><img src="../images/S3.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		 <li><a href="#"><img src="../images/S4.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S5.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S6.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S7.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S8.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S9.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S10.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S11.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S12.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		 <li><a href="#"><img src="../images/S13.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
      </ul>	 
   </div>
  </div>
   <!--这是第二屏HTML-->
  
  <div id="g">
   <a href="#"><img src="../images/G2.png" /></a>
   <a href="#"><img src="../images/G3.png" /></a>
   <a href="#"><img src="../images/G4.png" /></a>
  </div>
    <!--这是第二屏广告HTML-->
	
  <div id="c">
    <div class="z">
	  <b>站长推荐</b>
	  <span><a href="#">更多书籍》</a></span>
	 <img src="../images/h2.jpg" />
	</div>
	<div class="s">
     <ul>
	   <li><a href="#"><img src="../images/S2.png" /><br />儿童艺术博物馆<br/><b>￥79.00</b></a></li>
	    <li><a href="#"><img src="../images/S3.png" /><br />美国国家地理少儿版百科<br/><b>￥60.00</b></a></li>
		 <li><a href="#"><img src="../images/S4.png" /><br />环球旅行 立体科普书<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S5.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S6.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S7.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S8.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S9.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S10.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S11.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		  <li><a href="#"><img src="../images/S12.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
		 <li><a href="#"><img src="../images/S13.png" /><br />IT书城一些IT书籍<br/><b>￥60.00</b></a></li>
      </ul>	 
   </div>
  </div>
    <!--这是第三屏HTML-->

    <div id="G5">
       <a href="#"><img src="../images/G5.png" /> </a> 
    </div>  
   <!--这是第三屏广告HTML-->
   
    <div id="d">
	  <div class="a">
		<ul>
		<li><span>购物指南</span></li>
		<li><a href="#">购物流程</a></li>
		<li><a href="#">发票制度</a></li>
		<li><a href="#">账户管理</a></li>
		<li><a href="#">会员优惠</a></li>
		</ul>
	  </div>
	  
	  <div class="b">
	    <ul>
		<li><span>支付方式</span></li>
		<li><a href="#">货到付款</a></li>
		<li><a href="#">网上支付</a></li>
		<li><a href="#">礼品卡支付</a></li>
		<li><a href="#">银行转账</a></li>
		</ul> 
	  </div>
	  
	  <div class="c">
	    <ul>
		<li><span>订单服务</span></li>
		<li><a href="#">订单配送查询</a></li>
		<li><a href="#">订单状态说明</a></li>
		<li><a href="#">自助取消订单</a></li>
		<li><a href="#">自助修改订单</a></li>
		</ul>
	  </div>
	</div>
    <!--这是底部HTML-->
	
</body>
</html>
